<template>
  <el-container>
    <!-- 左侧 -->
    <el-aside :width="this.isCollapse?'68px':'202px'"
              style="overflow:visible;">

      <!-- 左侧导航栏 -->
      <el-menu
        default-active="1-4-1"
        :class="!this.isCollapse?'el-menu-vertical-demo':'el-menu-false'"
        :collapse="isCollapse"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :unique-opened="true"
        @open="handleOpen"
        @close="handleClose"
        :router="true"
      >
        <el-menu-item :class="!this.isCollapse?'demo':'demo-false'">
          <i class="el-icon-s-home" v-if="isCollapse"></i>
          <div class="demo-type">
            <!-- 登录头像及信息显示 -->
            <div>
              <el-avatar :size="60" src="https://empty" @error="errorHandler">
                <img
                  src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=421343706,2787877910&fm=26&gp=0.jpg"/>
              </el-avatar>
              <div class="demo-div" v-if="!isCollapse">
                <strong>Georgie</strong>
              </div>
            </div>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link" style="font-size: 16px;color: #D3DCE6">
                超级管理员<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">系统首页</el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus" @click.native="loginout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

        </el-menu-item>

        <!-- 引用组件 -->
        <menu-tree :menuList="this.menuList"/>

      </el-menu>

    </el-aside>

    <!-- 右侧 -->
    <el-container>

      <!-- 头部导航栏 -->
      <el-header>
        <!-- 左侧 -->
        <div @click="ifCollapse()" class="div-aside">
          <i class="el-icon-s-grid"></i>
        </div>

        <!-- 右侧 -->
        <div class="aside-right">

          <el-button icon="el-icon-chat-dot-square">
            <el-badge :value="200" :max="99" class="item"></el-badge>
          </el-button>
        </div>
      </el-header>

      <!-- 核心内容 -->
      <el-main>
        <!-- 路由视图 -->
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
    import {logout} from '../api/login'
    import {findAll} from '../api/menu'
    import MenuTree from '../components/MenuTree'

    export default {
        name: 'Index',
        data() {
            return {
                isCollapse: false,
                menuList: [
                    {
                        'id': 1,
                        'parentId': 0,
                        'menuName': '系统管理',
                        'url': '',
                        'icon': 'el-icon-setting',
                        'orderNum': 1,
                        'open': 1,
                        'disabled': false,
                        'perms': null,
                        'type': 0,
                        'children': [
                            {
                                'id': 253,
                                'parentId': 1,
                                'menuName': '欢迎页面',
                                'url': '/welcome',
                                'icon': 'el-icon-star-off',
                                'orderNum': 1,
                                'open': 0,
                                'disabled': false,
                                'perms': 'welcome:view',
                                'type': 0,
                                'children': []
                            },
                            {
                                'id': 226,
                                'parentId': 1,
                                'menuName': '用户管理',
                                'url': '/users',
                                'icon': 'el-icon-user',
                                'orderNum': 2,
                                'open': 0,
                                'disabled': false,
                                'perms': 'users',
                                'type': 0,
                                'children': []
                            },
                            {
                                'id': 321,
                                'parentId': 1,
                                'menuName': '附件管理',
                                'url': '/attachments',
                                'icon': 'el-icon-picture-outline',
                                'orderNum': 2,
                                'open': 1,
                                'disabled': false,
                                'perms': '',
                                'type': 0,
                                'children': []
                            },
                            {
                                'id': 4,
                                'parentId': 1,
                                'menuName': '菜单权限',
                                'url': '/menus',
                                'icon': 'el-icon-help',
                                'orderNum': 3,
                                'open': 0,
                                'disabled': false,
                                'perms': null,
                                'type': 0,
                                'children': []
                            },
                            {
                                'id': 235,
                                'parentId': 1,
                                'menuName': '角色管理',
                                'url': '/roles',
                                'icon': 'el-icon-postcard',
                                'orderNum': 3,
                                'open': 0,
                                'disabled': false,
                                'perms': '',
                                'type': 0,
                                'children': []
                            },
                            {
                                'id': 261,
                                'parentId': 1,
                                'menuName': '部门管理',
                                'url': '/departments',
                                'icon': 'el-icon-s-home',
                                'orderNum': 3,
                                'open': 0,
                                'disabled': false,
                                'perms': '',
                                'type': 0,
                                'children': []
                            },
                            {
                                'id': 319,
                                'parentId': 1,
                                'menuName': '公告管理',
                                'url': '/notices',
                                'icon': 'el-icon-s-flag',
                                'orderNum': 4,
                                'open': 0,
                                'disabled': true,
                                'perms': '',
                                'type': 0,
                                'children': []
                            }
                        ]
                    },
                    {
                        'id': 312,
                        'parentId': 0,
                        'menuName': '业务管理',
                        'url': null,
                        'icon': 'el-icon-s-goods',
                        'orderNum': 2,
                        'open': 0,
                        'disabled': false,
                        'perms': null,
                        'type': 0,
                        'children': [
                            {
                                'id': 229,
                                'parentId': 312,
                                'menuName': '物资管理',
                                'url': '',
                                'icon': 'el-icon-date',
                                'orderNum': 1,
                                'open': 1,
                                'disabled': false,
                                'perms': 'el-icon-date',
                                'type': 0,
                                'children': [
                                    {
                                        'id': 230,
                                        'parentId': 229,
                                        'menuName': '物资入库',
                                        'url': '/inStocks',
                                        'icon': 'el-icon-date',
                                        'orderNum': 1,
                                        'open': 1,
                                        'disabled': false,
                                        'perms': 'el-icon-date',
                                        'type': 0,
                                        'children': []
                                    },
                                    {
                                        'id': 267,
                                        'parentId': 229,
                                        'menuName': '物资资料',
                                        'url': '/products',
                                        'icon': 'el-icon-goods',
                                        'orderNum': 2,
                                        'open': 0,
                                        'disabled': false,
                                        'perms': '',
                                        'type': 0,
                                        'children': []
                                    },
                                    {
                                        'id': 268,
                                        'parentId': 229,
                                        'menuName': '物资类别',
                                        'url': '/productCategorys',
                                        'icon': 'el-icon-star-off',
                                        'orderNum': 2,
                                        'open': 0,
                                        'disabled': false,
                                        'perms': '',
                                        'type': 0,
                                        'children': []
                                    },
                                    {
                                        'id': 270,
                                        'parentId': 229,
                                        'menuName': '物资发放',
                                        'url': '/outStocks',
                                        'icon': 'el-icon-goods',
                                        'orderNum': 5,
                                        'open': 1,
                                        'disabled': false,
                                        'perms': '',
                                        'type': 0,
                                        'children': []
                                    },
                                    {
                                        'id': 316,
                                        'parentId': 229,
                                        'menuName': '物资库存',
                                        'url': '/stocks',
                                        'icon': 'el-icon-tickets',
                                        'orderNum': 5,
                                        'open': 0,
                                        'disabled': false,
                                        'perms': '',
                                        'type': 0,
                                        'children': []
                                    }
                                ]
                            },
                            {
                                'id': 311,
                                'parentId': 312,
                                'menuName': '物资流向',
                                'url': null,
                                'icon': 'el-icon-edit',
                                'orderNum': 3,
                                'open': 0,
                                'disabled': false,
                                'perms': null,
                                'type': 0,
                                'children': [
                                    {
                                        'id': 310,
                                        'parentId': 311,
                                        'menuName': '物资去处',
                                        'url': '/consumers',
                                        'icon': 'el-icon-edit',
                                        'orderNum': 1,
                                        'open': 0,
                                        'disabled': false,
                                        'perms': '',
                                        'type': 0,
                                        'children': []
                                    },
                                    {
                                        'id': 269,
                                        'parentId': 311,
                                        'menuName': '物资来源',
                                        'url': '/suppliers',
                                        'icon': 'el-icon-coordinate',
                                        'orderNum': 5,
                                        'open': 0,
                                        'disabled': false,
                                        'perms': '',
                                        'type': 0,
                                        'children': []
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        'id': 303,
                        'parentId': 0,
                        'menuName': '健康报备',
                        'url': '',
                        'icon': 'el-icon-platform-eleme',
                        'orderNum': 3,
                        'open': 0,
                        'disabled': false,
                        'perms': '',
                        'type': 0,
                        'children': [
                            {
                                'id': 273,
                                'parentId': 303,
                                'menuName': '全国疫情',
                                'url': '/map',
                                'icon': 'el-icon-s-opportunity',
                                'orderNum': 1,
                                'open': 1,
                                'disabled': false,
                                'perms': 'map:view',
                                'type': 0,
                                'children': []
                            },
                            {
                                'id': 304,
                                'parentId': 303,
                                'menuName': '健康打卡',
                                'url': '/health',
                                'icon': 'el-icon-s-cooperation',
                                'orderNum': 1,
                                'open': 0,
                                'disabled': false,
                                'perms': '',
                                'type': 0,
                                'children': []
                            },
                            {
                                'id': 305,
                                'parentId': 303,
                                'menuName': '查看情况',
                                'url': null,
                                'icon': 'el-icon-c-scale-to-original',
                                'orderNum': 2,
                                'open': 1,
                                'disabled': false,
                                'perms': null,
                                'type': 0,
                                'children': []
                            },
                            {
                                'id': 272,
                                'parentId': 303,
                                'menuName': '疫情辟谣',
                                'url': '/rumors',
                                'icon': 'el-icon-help',
                                'orderNum': 5,
                                'open': 0,
                                'disabled': false,
                                'perms': null,
                                'type': 0,
                                'children': []
                            }
                        ]
                    },
                    {
                        'id': 295,
                        'parentId': 0,
                        'menuName': '其他管理',
                        'url': '',
                        'icon': 'el-icon-s-marketing',
                        'orderNum': 5,
                        'open': 0,
                        'disabled': false,
                        'perms': '',
                        'type': 0,
                        'children': [
                            {
                                'id': 297,
                                'parentId': 295,
                                'menuName': '监控管理',
                                'url': '',
                                'icon': 'el-icon-warning',
                                'orderNum': 1,
                                'open': 0,
                                'disabled': false,
                                'perms': '',
                                'type': 0,
                                'children': [
                                    {
                                        'id': 298,
                                        'parentId': 297,
                                        'menuName': 'SQL监控',
                                        'url': '/druid',
                                        'icon': 'el-icon-view',
                                        'orderNum': 1,
                                        'open': 0,
                                        'disabled': false,
                                        'perms': null,
                                        'type': 0,
                                        'children': []
                                    }
                                ]
                            },
                            {
                                'id': 341,
                                'parentId': 295,
                                'menuName': '个人博客',
                                'url': '/blog',
                                'icon': 'el-icon-view',
                                'orderNum': 1,
                                'open': 0,
                                'disabled': false,
                                'perms': '',
                                'type': 0,
                                'children': []
                            },
                            {
                                'id': 296,
                                'parentId': 295,
                                'menuName': 'swagger文档',
                                'url': '/swagger',
                                'icon': 'el-icon-document',
                                'orderNum': 2,
                                'open': 0,
                                'disabled': false,
                                'perms': null,
                                'type': 0,
                                'children': []
                            },
                            {
                                'id': 318,
                                'parentId': 295,
                                'menuName': '图标管理',
                                'url': '/icons',
                                'icon': 'el-icon-star-off',
                                'orderNum': 2,
                                'open': 1,
                                'disabled': false,
                                'perms': '',
                                'type': 0,
                                'children': []
                            }
                        ]
                    },
                    {
                        'id': 5,
                        'parentId': 0,
                        'menuName': '日志管理',
                        'url': '/logs',
                        'icon': 'el-icon-camera',
                        'orderNum': 6,
                        'open': 0,
                        'disabled': false,
                        'perms': null,
                        'type': 0,
                        'children': [
                            {
                                'id': 271,
                                'parentId': 5,
                                'menuName': '登入日志',
                                'url': '/loginLog',
                                'icon': 'el-icon-date',
                                'orderNum': 1,
                                'open': 0,
                                'disabled': false,
                                'perms': 'login:log',
                                'type': 0,
                                'children': []
                            },
                            {
                                'id': 307,
                                'parentId': 5,
                                'menuName': '操作日志',
                                'url': '/logs',
                                'icon': 'el-icon-edit',
                                'orderNum': 1,
                                'open': 1,
                                'disabled': false,
                                'perms': '',
                                'type': 0,
                                'children': []
                            }
                        ]
                    }
                ]
            }
        },
        //加载事件
        created() {
            this.getMenuList();
        },
        methods: {
            ifCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath)
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath)
            },
            /* 图片加载失败 */
            errorHandler() {
                return true
            },
            // 退出登录
            async loginout() {
                const {data} = await logout();
                console.log(data);
                if (data.code == 2009) {
                    this.$router.replace('/login');
                }
            },
            //获取菜单
            async getMenuList() {
                const {data} = await findAll();
                if(data.code == 200){
                    this.menuList = data.data.menus;
                }
            }
        },
        components: {
            MenuTree
        },
        /* 监听事件 */
        watch: {
            "isCollapse": function (newVal, oldVal) {
                console.log(newVal + '---' + oldVal);
            }
        }
    }
</script>

<style scoped lang="less">

  .el-container {
    height: 100%;

    .el-header {
      display: flex;
      justify-content: space-between;

      /* 头部右侧导航栏 */

      .aside-right {
        display: flex;
        justify-content: center;

        .el-button {
          margin: 0;
          padding: 0;
          padding-left: 20px;
          color: white;
          background-color: #B3C0D1;
          border: none;
          font-size: 20px;
        }

        .el-button:hover {
          background-color: #D3DCE6;
        }

        /* 信息提醒 */

        .item {
          margin-top: -40px;
          margin-left: -15px;
        }
      }
    }

    /* 左侧头像样式 */

    .demo {
      height: 172px;
      width: 200px;
    }

    .demo-false {
      height: 56px;
      width: 56px;
    }


    /* 边距调整 */

    .el-menu-false {
      width: 68px;
    }

    .el-submenu__icon-arrow .el-icon-arrow-right::before {
      content: none;
    }

    .demo-type {
      padding-top: 30px;
    }

    .demo-div {
      margin-top: -10px;
      margin-bottom: 5px;
      height: 15px;
      font-size: 12px;
    }
  }

  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #545c64;
    color: #333;
    /*text-align: center;*/
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
  }
</style>
